import Taro, { Component } from '@tarojs/taro'
import { AtActionSheet, AtInput } from 'taro-ui'
import classnames from 'classnames'
import PropsType from 'prop-types'
import { View, Image } from '@tarojs/components'
import '../styles/selectcolor.scss'

const itemBg = require('./itemselect.png')
let _length = 0
const _status = [], _information = []
export default class DSelectColor extends Component {
    constructor(props) {
        super(props)
        this.state = {
            inputStatus: false,
            inputValue: "",
            itemColor: [],
            list: [
                {
                    color: '白色',
                    status: false
                },
                {
                    color: '黑色',
                    status: false
                },
                {
                    color: '灰色',
                    status: false
                },
                {
                    color: '红色',
                    status: false
                },
                {
                    color: '银色',
                    status: false
                },
                {
                    color: '金色',
                    status: false
                },
                {
                    color: '蓝色',
                    status: false
                },
                {
                    color: '其他',
                    status: false
                },
				{
				    color: '不限',
				    status: false
				}
            ],
            itemlist: []
        }
    }

    componentDidUpdate() {
        let { isOpened, value = '', count = 2 } = this.props

        if (isOpened && value && !_status[0] && count === 2) {
            let _arr = value.split('/')
            var { list, itemlist } = this.state
            var { list } = this.props

            itemlist = []
            list.map((item, i) => {
                _arr.map(_item => {
                    if (item.color === _item) {
                        item.status = true
                        itemlist.push(i)
                    } else if (item.color === _item.split(':')[0]) {
                        item.status = true
                        itemlist.push(i)
                    }
                })
            })
            this.setState({
                list,
                itemlist
            }, () => {
                this.getSelectImte(list)
                _status[0] = true
            })
        } else if (isOpened && value && !_status[0] && count === 0) {
            let _arr = value
            var { list, itemlist } = this.state
            var { list } = this.props
            itemlist = []
            list.map((item, i) => {
                if (item.color === _arr) {
                    item.status = true
                    itemlist.push(i)
                }
            })
            this.setState({
                list,
                itemlist
            }, () => {
                this.getSelectImte(list)
                _status[0] = true
            })
        } else if (isOpened && !value && !_information[0]) {
            _length = 0
            _information[0] = true
        }
    }

    onHandleColor(value) {
        this.setState({
            inputValue: value
        })
    }
    setOtherColor(status) {
        this.setState({
            inputStatus: status
        })
    }

    onSelectHandle(i) {
        var {list,  itemColor, itemlist } = this.state
        var { list  }  = this.props
        const { count = 2 } = this.props

        // 判断选择三个
        if (_length > count && list[i].status) {
            list[i].status = false
            let k = ''
            itemColor.map((item, p) => {
                if (item === list[i].color) {
                    k = p
                }
            })
            itemColor.splice(k, 1)
            this.setState({
                list,
                itemColor
            }, () => {
                // if (i === 7) {
                //     this.setOtherColor(this.state.list[i].status)
                // }
                this.getSelectImte(list)
            })
            return
        } else if (_length > count && !list[i].status) {
            let itemcount = count
            list.forEach((item, index) => {
                if (index == i) {
                    list[i].status = !list[i].status
                    itemColor = []
                }else {
                    list[index].status = false
                }
            })
            // return Taro.showToast({
            //     title: `最多选择${itemcount + 1}个颜色`,
            //     icon: 'none'
            // })
        } else if (itemlist.length <= count && _length <= count) {
            list.map((item, k) => {
                if (k === i) {
                    item.status = !item.status
                }
            })
        }
        list.map((item) => {
            if (item.status) {
                itemColor.push(item.color)
            }
        })
        let _itemColor = [...new Set(itemColor)]
        this.setState({
            list,
            itemColor: _itemColor
        }, () => {
            // if (i ===_itemColor.length-1) {
            //     this.setOtherColor(this.state.list[i].status)
            // }
            this.getSelectImte(list)
            if (count === 0) {
                this.onSubmitHandle()
            }
        })
    }

    // 判断颜色选择情况
    getSelectImte(list) {
        let { itemlist } = this.state
        itemlist = []
        _length = 0
        list.map((item, i) => {
            if (item.status) {
                itemlist.push(i)
                _length++
            }
        })
        this.setState({
            itemlist
        })
    }

    onCancelHandle() {
        var { list } = this.state
		 var {list} = this.props
        list.map(item => {
            item.status = false
        })
        this.setState({
            list
        }, () => {
            _status.splice(0, 1)
            _information.splice(0, 1)
            this.props.onCancelHandle && this.props.onCancelHandle()
        })
    }

    onSubmitHandle() {
        var { list, inputValue } = this.state
		 var { list} = this.props
        let itemColor = []
        list.map((item, i) => {
            if (item.status && i !== 7) {
                itemColor.push({
                    i,
                    color: item.color
                })
            } else if (item.status && i === 7 && !inputValue) {
                Taro.showToast({
                    icon: 'none',
                    title: '请填写其他颜色'
                })
                return
            } else if (item.status && i === 7 && inputValue) {
                itemColor.push({
                    i: 7,
                    color: '其他:' + inputValue
                })
                return
            }
			// if (item.status && i !== 7) {
			//     itemColor.push({
			//         i,
			//         color: item.color
			//     })
			// } else if (item.status && i === 7 && !inputValue) {
			//     Taro.showToast({
			//         icon: 'none',
			//         title: '请填写其他颜色'
			//     })
			//     return
			// } else if (item.status && i === 7 && inputValue) {
			//     itemColor.push({
			//         i: 7,
			//         color: '其他:' + inputValue
			//     })
			//     return
			// }
            item.status = false
        })
        _status.splice(0, 1)
        _information.splice(0, 1)
        return this.props.onSubmitHandle && this.props.onSubmitHandle(itemColor)
    }

    render() {
        let {
            isOpened,
            className,
            count,
            list
        } = this.props
        let {
            list:oldColor,
            inputStatus,
            inputValue
        } = this.state
     // list = list?list.length?list:colorColr
        return (
            <View className={classnames('b_selectcolor', className)}>
                <AtActionSheet isOpened={isOpened} onClose={this.onCancelHandle.bind(this)}>
                    <View className='b_selectcolor__title'>
                        <View className='b_selectcolor__title_cancel' onClick={this.onCancelHandle.bind(this)}>取消</View>
                        <View className='b_selectcolor__title_item'>{count === 0 ? '外观颜色' : '内饰颜色'}</View>
                        <View className='b_selectcolor__title_submit' onClick={this.onSubmitHandle.bind(this)}>提交</View>
                    </View>
                    <View className='b_selectcolor__list'>
                        {
                            list && list.map((item, i) => {
                                return <View className={classnames('b_selectcolor__list_item', item.status ? 'b_selectcolor__active' : '')} key={i} onClick={this.onSelectHandle.bind(this, i)}>
                                    <View>{item.color}</View>
                                    {
                                        item.status && <Image className='b_selectcolor__list_item__img' src={itemBg}></Image>
                                    }
                                </View>
                            })
                        }
                    </View>
                    {
                        inputStatus && <View className='b_selectcolor__input'>
                            <AtInput maxLength={11} value={inputValue} title='其他' placeholder={`请输入车辆${count === 0 ? '外观颜色' : '内饰颜色'}`} onChange={this.onHandleColor.bind(this)}></AtInput>
                        </View>
                    }
                </AtActionSheet>
            </View>
        )
    }
}

DSelectColor.defaultProps = {
    isOpened: false,
    className: "",
	list:[],
    onSubmitHandle: () => { }
}

DSelectColor.PropsType = {
    isOpened: PropsType.bool,
	list:PropsType.object,
    className: PropsType.oneOfType[PropsType.string, PropsType.object],
    onSubmitHandle: PropsType.func
}
